// 定义根据数据,动态渲染页面中任务列表的函数
function render(result) {
  if (!result.success) return alert(result.msg)

  // 1.5 接收到响应之后,根据数据动态的渲染页面中的任务列表
  let str = ''
  // 1.5.1 根据result.data.data数组的数据,动态拼接li标签的字符串
  result.data.forEach((item) => {
    str += `<li>
      <label>
        <input type="checkbox" ${item.isDone ? 'checked' : ''}/>
        <span class="${item.isDone ? 'active' : ''}">${item.todoName}</span>
      </label>
      <button class="btn btn-danger" style="display: none">删除</button>
    </li>`
  })
  ul.innerHTML = str
}

// 1. 实现添加任务的功能
// 1.1 获取添加的文本框
const input = document.querySelector('.todo-header input')
// 获取ul元素
const ul = document.querySelector('.todo-main')
// 1.2 给文本框注册事件(keydown)
input.onkeydown = async function (e) {
  // 1.3 在事件中,判断如果按下的是回车,才执行后续的代码 e.key
  if (e.key !== 'Enter') return
  // 1.4 调用axios发送请求
  // 1.4.1 先获取用户输入的任务名
  const todoName = this.value.trim()
  // 1.4.2 如果用户输入的是空字符串或一堆空格,则直接return
  if (!todoName) return
  const result = await fetch_addTodo(todoName)
  // 清空文本框
  this.value = ''
  render(result)
}

// 2. 一打开页面,立刻获取所有任务数据,然后渲染到任务列表中
;(async function () {
  const result = await fetch_getTodos()
  render(result)
})()
